<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <!-- load css -->
    <link rel="stylesheet" href="../static/layui-v1.0.9_rls/layui/css/layui.css">
    <!--<link rel="stylesheet" href="../static/css/global.css">-->
    <!--<link rel="stylesheet" href="../static/css/adp.css">-->

    <!--[if lt IE 9]>
    <script src="http://www.json.org/json2.js"></script>
    <![endif]-->
</head>
<body style="background: #F1F2F7;">
<section style="padding: 20px;">
    <div>

        <blockquote class="layui-elem-quote layui-show" style="background-color: white;border-radius: 3px;">
            <div>

                <button class="layui-btn adp-add-btn" type="button"><i class="layui-icon">&#xe61f;</i> 增加</button>
                <button class="layui-btn adp-delete-all-btn" type="button"><i class="layui-icon">&#x1006;</i>删除</button>
                <button class="layui-btn role-test-btn" type="button">测试</button>

            </div>
        </blockquote>

        <div style="background-color: white;padding: 10px;border-radius: 3px;">
            <form class="layui-form layui-form-pane" id="queryForm" action="" method="post">
                <div class="layui-inline">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-inline">
                        <input name="roleName" value="" placeholder="请输入关键词" class="layui-input" type="text">
                    </div>
                </div>
                <!--<div class="layui-inline">-->
                <!--<label class="layui-form-label">关键词</label>-->
                <!--<div class="layui-input-inline">-->
                <!--<input name="keyword2" value="" placeholder="请输入关键词" class="layui-input" type="text">-->
                <!--</div>-->
                <!--</div>-->
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-radius layui-btn-normal" lay-filter="adp-query-bth" lay-submit><i
                            class="layui-icon">&#xe615;</i>搜索
                    </button>
                </div>
            </form>

            <table class="layui-table" lay-even="" lay-skin="row">
                <colgroup>
                    <col width="20">
                    <col width="150">
                    <col width="150">
                    <col width="200">
                    <col>
                    <col width="200">
                </colgroup>
                <thead>
                <tr>
                    <th><input type="checkbox"></th>
                    <th>角色名称</th>
                    <th>角色类型</th>
                    <th>角色描述</th>
                    <th>权限</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>


        </div>

    </div>
</section>

<div id="adp-merge-content" style="width: 400px;display: none;">
    <br/>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="roleName"  lay-verify="required" placeholder="请输角色名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">密码框</label>-->
        <!--<div class="layui-input-inline">-->
        <!--<input type="password" name="password" required lay-verify="required" placeholder="请输入密码"-->
        <!--autocomplete="off" class="layui-input">-->
        <!--</div>-->
        <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
        <!--</div>-->
        <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">选择框</label>-->
        <!--<div class="layui-input-block">-->
        <!--<select name="city" lay-verify="required">-->
        <!--<option value=""></option>-->
        <!--<option value="0">北京</option>-->
        <!--<option value="1">上海</option>-->
        <!--<option value="2">广州</option>-->
        <!--<option value="3">深圳</option>-->
        <!--<option value="4">杭州</option>-->
        <!--</select>-->
        <!--</div>-->
        <!--</div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block" id="form-resource-list" lay-verify="principal">

            </div>
        </div>
        <!--<div class="layui-form-item" pane="">-->
            <!--<label class="layui-form-label">权限xx</label>-->
            <!--<div class="layui-input-block" >-->
                <!--<input name="like1[write]" lay-skin="primary" title="写作" checked="" type="checkbox">-->
                <!--<input name="like1[read]" lay-skin="primary" title="阅读" type="checkbox">-->
                <!--<input name="like1[game]" lay-skin="primary" title="游戏" disabled="" type="checkbox">-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label">激活</label>-->
            <!--<div class="layui-input-block">-->
                <!--<input type="checkbox" name="enable" lay-skin="switch">-->
            <!--</div>-->
        <!--</div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">角色类型</label>
            <div class="layui-input-block">
                <input type="radio" name="roleType" value="admin" title="超级管理员">
                <input type="radio" name="roleType" value="user" title="普通角色" checked>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">角色描述</label>
            <div class="layui-input-block">
                <textarea name="describing" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <button class="layui-btn" lay-submit lay-filter="adp-merge-btn">提交</button>

                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>


</body>
</html>
<!-- 加载js文件-->
<script src="../static/layui-v1.0.9_rls/layui/layui.js"></script>
<script id="tabletpl" type="text/html">

    {{# layui.each(d.list, function(index, item){ }}
    <tr>
        <td><input type="checkbox" value="{{ item.id }}"></td>
        <td>{{= item.roleName }}</td>
        <td>{{ item.roleType =='admin'? '<span style="color:blue;">超级管理员</span>':'<span style="color:green;">普通角色</span>' }}</td>
        <td>{{= item.describing || ''}}</td>
        <td>

            {{# layui.each(distinct(item.resources), function(index2, item2){ }}
            {{= item2 || ''}}
            {{# }); }}
        </td>
        <td>
            <a href="javascript:;" data-id="{{ item.id }}"
               class="layui-btn layui-btn-small  layui-btn-warm adp-update-btn"><i class="layui-icon">&#xe60a;</i>更新</a>
            <a href="javascript:;" data-id="{{ item.id }}"
               class="layui-btn layui-btn-small  layui-btn-warm adp-delete-btn"><i class="layui-icon">&#x1006;</i>删除</a>
        </td>
    </tr>
    {{# }); }}

</script>

<script id="resourceList" type="text/html">
    {{# layui.each(d.list, function(index, item){ }}
    <input type="checkbox" name="resources[{{ index }}].principal" value="{{ item }}" title="{{ item }}">
    {{# }); }}
</script>

<script type="text/javascript">

    function distinct(list) {
        var list = list.map(function (value) {
            return value.principal;
        }).filter(function (value) {
            return value != "";
        }).unique();
        return list;
    }


    Array.prototype.unique = function () {
        var res = [];
        var json = {};
        for (var i = 0; i < this.length; i++) {
            if (!json[this[i]]) {
                res.push(this[i]);
                json[this[i]] = 1;
            }
        }
        return res;
    };

    layui.config({
        base: '../static/js/'
    }).use(['jquery', 'layer', 'element', 'laypage', 'form', 'laytpl', 'adp'], function () {
        window.jQuery = window.$ = layui.jquery;
        window.layer = layui.layer;
        var adp = layui.adp({
            tablebodytpl: tabletpl.innerHTML, //表格内容模板
            service: "Role", //后台服务名
            //当编辑窗口弹出后会调用次函数，可以做一些后续处理，比如禁用某些页面元素
            //比如本例中在编辑角色时不让更改角色名称
            onMergeWindowShow: function ($mergeform) {
                var $rolename = $mergeform.find("[name='roleName']");
                if ($rolename.val() != '') {
                    $rolename.addClass("layui-disabled");
                } else {
                    $rolename.removeClass("layui-disabled");
                }
                ;

            },
            load: true//是否在页面加载时就查询表格
        });


        //上面是标配，下面是各模块定制内容

        var laytpl = layui.laytpl;
        var form = layui.form();

        //自定义验证规则
        form.verify({
            //加在普通div上也有效
            principal: function (value) {
                if ($("input[name*='principal']:checked").size() == 0) {
                    return '权限必须选择!';
                }
            },
            range: [/(.+){6,12}$/, '必须6到12位']
        });


        //获取角色可绑定资源列表
        adp.post({service: "Resource", method: "list", data: {pageSize: 1000,pageNumber:1}}, function (rl) {
            var list = rl.list.map(function (value) {
                return value.principal;
            }).filter(function (value) {
                return value != "";
            }).unique();

            laytpl(resourceList.innerHTML).render({list: list}, function (html) {
                $("#form-resource-list").html(html);
            });
            form.render('checkbox');
        });

        $(".adp-role-xxx").click(function () {
            layer.msg("更改成你的逻辑!");
        });

        $(".role-test-btn").on("click", function () {
            layer.msg("更改成你的逻辑!");

            adp.post({
                service: "Role",
                method: "test",
                data: {xx: "xx", yy: "yy", roleName: "zhangsan"}
            }, function (result) {

                layer.msg("成功!");
            }, true);
            layer.close(index);

        });


    });


</script>